<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('评价新增/编辑')">
	<link rel="stylesheet" th:href="@{/adminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css}">
	<meta charset="UTF-8">
</head>
<body>
<div id="editMainDiv" style="padding: 10px; overflow: auto; height: 100%;">
	<div class="container" style="padding: 0px;">
		<div class="row" style="padding: 20px 0;">
			<h5 style="margin-left: 3px;">{{title}}</h5>
		</div>
		<div class="row form-group">
			<label class="control-label col-lg-1 col-md-1 col-sm-1">用户信息</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<select class="form-control" id="userSelect" v-model="modelData.userGuid">
					<option v-for="v in userList" :value="v.id">{{v.name}}</option>
				</select>
			</div>
			<label class="control-label col-lg-1 col-md-1 col-sm-1">图书信息</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<select class="form-control" id="bookSelect" v-model="modelData.bookGuid">
					<option v-for="v in bookList" :value="v.id">{{v.name}}</option>
				</select>
			</div>
			<label class="control-label col-lg-1 col-md-1 col-sm-1">评价</label>
			<div class="col-lg-3 col-md-3 col-sm-3">
				<input type="text" class="form-control" v-model="modelData.rating"/>
			</div>
		</div>
		<div class="row form-group">
			<label class="control-label col-lg-1 col-md-1 col-sm-1">评价备注</label>
			<div class="col-lg-11 col-md-11 col-sm-11">
				<textarea class="form-control" rows="5" v-model="modelData.remarks"></textarea>
			</div>
		</div>
		<div style="text-align: center;">
			<button type="button" @click="save" class="btn btn-success col-lg-2 col-md-2 col-lg-offset-3 col-md-offset-3">保存</button>
			<button type="button" @click="cancel" class="btn btn-warning col-lg-2 col-md-2 col-lg-offset-1 col-md-offset-1">取消</button>
		</div>
	</div>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript" th:inline="javascript">
const userGuid = [[${userGuid}]], bookGuid = [[${bookGuid}]],
		BASE_PATH = [[@{/}]];
const URLS = {
	PAGE_URLS: {
	},
	API_URLS: {
		SAVE: BASE_PATH+'/restful/rating/save',
		UPDATE: BASE_PATH+'/restful/rating/update',
		GET: BASE_PATH+'/restful/rating/get',
		USER_LIST: BASE_PATH+'/restful/user/findAll',
		BOOK_LIST: BASE_PATH+'/restful/book/findAll'
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#editMainDiv',
	data: {
		title: '添加用户',
		modelData: {
			userName: '',
			userGuid: '',
			bookGuid: '',
			bookName: '',
			rating: '',
			remarks: ''
		},
		userList: [],
		bookList: []
	},
	methods: {
		init: function() {
			axios.get(URLS.API_URLS.USER_LIST)
			.then(function (res) {
				data = res.data;
				console.log(data);
				if (data.code == 200) {
					data = data.data;
					app.userList = data;
				}
			}).catch(function (error) {
			});
			axios.get(URLS.API_URLS.BOOK_LIST)
			.then(function (res) {
				data = res.data;
				console.log(data);
				if (data.code == 200) {
					data = data.data;
					app.bookList = data;
				}
			}).catch(function (error) {
			});
			/*
			* 获取编辑的数据
			*/
			if (userGuid == null || userGuid == 'null') {
				
			} else {
				this.title = '编辑用户';
				axios.post(URLS.API_URLS.GET, {
					userGuid: userGuid,
					bookGuid: bookGuid
				})
				.then(function (res) {
					data = res.data;
					console.log(data);
					if (data.code == 200) {
						data = data.data;
						app.modelData = data;
					}
				}).catch(function (error) {
				});
			}
		},
		save: function() {
			let saveDataJson = app.modelData;
			let url = (userGuid == null) ? URLS.API_URLS.SAVE : URLS.API_URLS.UPDATE;
			saveDataJson.userName = $('#userSelect').text();
			saveDataJson.bookName = $('#bookSelect').text();
			axios.post(url, saveDataJson)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					layer.alert('保存成功', function(i) {
						layer.close(i);
						let index = parent.layer.getFrameIndex(window.name);
						parent.layer.close(index);
					})
				} else {
					layer.alert(data.message);
				}
			}).catch(function (error) {
			});
		},
		cancel: function() {
			let index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>